<!DOCTYPE html>
<html>
<style>
#container {
    position: relative;
    width: 100px;
    height: 50px;
    /* Not using will-change:transform because it ignores subpixel accumulation. */ 
    will-change: opacity;
}
#test {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid red;
}
#console {
    display: none;
}
body, html {
    margin: 0px;
    padding: 0px;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
var testData = [
    // left of #container, initial left of #test, final left of #test
    [ '10.5px', '12.5px', '10.5px' ],
    [ '10.6px', '12.4px', '10.4px' ],
    [ '10.4px', '12.6px', '10.6px' ],
    [ '10.6px', '12.6px', '10.6px' ],
    [ '10.4px', '12.4px', '10.4px' ]
];
var testIndex = 0;

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function repaintTest() {
    document.getElementById('container').style.left = testData[testIndex][0];
    document.getElementById('test').style.left = testData[testIndex][1];
    runAfterLayoutAndPaint(runTest);
};

function runTest() {
    if (window.internals)
        internals.startTrackingRepaints(document);
    document.getElementById('test').style.left = testData[testIndex][2];
    if (window.internals) {
        document.getElementById('console').textContent += testData[testIndex] + ':\n'
            + internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);
    }

    if (++testIndex < testData.length) {
        repaintTest();
    } else {
        // Display the test results only after test is done so that it does not affect repaint rect results.
        document.getElementById('console').style.display = "block";
        if (window.testRunner)
            testRunner.notifyDone();
    }
}
</script>
<body onload="repaintTest()">
<div id="container"><div id="test"></div></div>
<pre id="console"></pre>
